<template>
	<view>
		<view class="content">
			<view class="item">
				<text class="left">
					头像
				</text>
				<view class="right" @click="showPop('bottom')">
					<image :src="userInfo.avatar" mode="" class="avatar"></image>
					<image src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/arrow1.png" mode="" class="arrow"></image>
					<!-- <input type="text" v-model="cust_name" maxlength="12"  placeholder-style="color:#CCCCCC" placeholder="" /> -->
				</view>
			</view>
			<view class="item">
				<view class="[left,tt]">
					<text class="fir-text">
						昵称
					</text>
					<text class="sec-text">
						限2~32个字符，一个汉字为2个字符
					</text>
				</view>

				<view class="[right,ttr]">
					<div class='input' v-if="!userInfo.nickname">
						<input type="nickName" v-model="nickname" placeholder-style="color:#CCCCCC"
							placeholder="请输入昵称" />
					</div>
					<text v-else>{{userInfo.nickname}}</text>
					<image src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/arrow1.png" mode="" class="arrow"></image>
				</view>
			</view>
			<view class="item">
				<text class="left">
					性别
				</text>
				<view class="right">
					<text>{{userInfo.sex == 1?'男':'女'}}</text>
				</view>
			</view>
			<view class="item">
				<text class="left">
					手机号
				</text>
				<view class="right">
					<text>{{userInfo.mobile}}</text>
				</view>
			</view>
			<view class="item">
				<text class="left">
					合伙人
				</text>
				<view class="right">
					<text>----</text>
				</view>
			</view>

		</view>
		<button @click="submit" :class="{colorChange: !select}">确认</button>
		<popBottom :type='type' :status='status' @tabtap="tabtap"></popBottom>

		<!-- <loading ref="loading" :custom="false" :shadeClick="true" :type="1"></loading> -->

	</view>
</template>

<script lang="ts">
	import popBottom from './components/pop-bottom/pop-bottom.vue'
	import {
		Mcaptcha
	} from '@/util/mcaptcha';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		defineComponent,
		getCurrentInstance,
		onMounted,
		reactive,
		ref,
		toRefs
	} from 'vue';
	import type {
		Ref
	} from 'vue'
	export default defineComponent({
		components: {
			popBottom
		},
		setup() {
			const {
				proxy
			} = getCurrentInstance() as any
			let dataList = reactive({
				nickname: '', // 昵称
				select: true,
				userInfo: {
					
					nickname: "芋艿",
					avatar: "http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/my/avater.png",
					mobile: "15601691300"
					
				
				},
				type: 'bottom',
				status: false,


			})

			function showPop(type) {
				dataList.type = type
				dataList.status = true
				console.log(dataList.type, dataList.status, 'dataList.status')
			}
			// 子组件传给父组件
			function tabtap(status) {
				dataList.status = status
			}

			// function getUserInfo() {
			// 	let url = proxy.$API.getUserInfo
			// 	console.log(proxy.$API.getUserInfo, 'login')
			// 	proxy.$UNIHTTP.getData(url, {}).then((res: any) => {
			// 		console.log(res, 'res')
			// 		if (res) {
			// 			if (res.code == 0) {
			// 				dataList.userInfo = res.data
			// 				uni.setStorageSync('userInfo',userInfo)

			// 			} else if (res.msg) {
			// 				uni.showToast({
			// 					title: res.msg, //显示的文字 
			// 				})
			// 			}
			// 		} else {
			// 			uni.showToast({
			// 				title: '系统错误', //显示的文字 
			// 			})
			// 		}
			// 	})
			// }

			function updateNickname(nickname) {
				let url = api.updateNickname
				console.log(api.updateNickname, 'login')
				let data = {
					// avatarFile: avaterUrl
				}
				requestHttp.postData(url, data).then((res) => {
					console.log(res, 'res')
					if (res) {
						if (res.code == 200) {

						} else if (res.msg) {
							uni.showToast({
								title: res.msg, //显示的文字 
							})
						}
					} else {
						uni.showToast({
							title: '系统错误', //显示的文字 
						})
					}
				})
			}

			function submit() {

			}


			onMounted(() => {
				let userInfo = uni.getStorageSync('userInfo')
				if(userInfo){
					dataList.userInfo = userInfo
				}else{
					
				}
				// getUserInfo()
			})

			return {
				updateNickname,
				showPop,
				tabtap,
				submit,
				...toRefs(dataList),
			}
		}

	})
</script>

<style lang="scss">
	.content {
		border-top: 2upx solid #F7F7F7;
		background-color: #FFFFFF;
	}

	.item {
		width: 94%;
		height: 112upx;
		margin: 0 auto;
		box-sizing: border-box;
		/* border-bottom: 2upx solid #F2F2F2; */
		display: flex;
		align-items: center;
	}

	.left {
		width: 36%;
		margin-left: 2%;
		font-family: PingFangSC-Regular;
		font-size: 28upx;
		color: #333333;
	}

	// text {
	// 	color: #FF0000;
	// }

	.right {
		position: relative;
		width: 60%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		font-size: 28upx;

		.input {
			position: absolute;
			right: 45rpx;
			text-align: right;
		}

		text {
			position: absolute;
			right: 45rpx;
		}

		.avatar {
			position: absolute;
			right: 40rpx;
			height: 80rpx;
			width: 80rpx;
			border-radius: 50%;
		}

		.arrow {
			position: absolute;
			right: 10rpx;
			height: 20rpx;
			width: 20rpx;


		}
	}

	.agreement {
		font-size: 22upx;
		color: #999999;
	}

	.footer {
		margin-top: 20upx;
		display: flex;
		width: 94%;
		margin: 20upx auto;
	}

	button::after {
		border: none;
	}

	button {
		position: fixed;
		bottom: 80rpx;
		left: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80%;
		/* margin: 56upx auto; */
		background-color: #0ABA94;
		color: #FFFFFF;
		font-size: 32upx;
		border-radius: 40rpx;
		height: 80rpx;
	}

	.getCode {
		width: 200upx;
		height: 40.6upx;
		font-family: PingFangSC-Regular;
		font-size: 28upx;
		color: #2079FA;
		letter-spacing: 0;
		text-align: center;
		line-height: 40.6upx;
		border: 2upx solid #2079FA;
		border-radius: 8upx;
	}

	.picCode {
		width: 160upx;
		height: 60upx;
	}

	picker {
		width: 100%;
	}

	.color {
		color: #CCCCCC;
	}

	.down {
		width: 34upx;
		height: 18upx;
		margin-left: 24upx;
		margin-top: 12upx;
	}

	

	.colorChange {
		background-color: #0ABA94;
		opacity: 0.5;
		/* 禁止点击 */
		pointer-events: none;
	}

	.tt {
		display: flex;
		flex-direction: column;
		// width: 65%;
		color: #333333;

		.sec-text {
			padding-top: 20rpx;
			width: 400rpx;
			font-size: 20rpx;
			color: #C4C4C4;
		}

	}

	.ttr {
		padding-bottom: 40rpx;
		image {
			width: 26upx;
			height: 26upx;
			padding: 4rpx 10rpx 0 0;
		}
	}
</style>
